<template>
  <div>
    <div class="photo-manager">
      <!-- 搜索栏部分 -->
      <el-row class="search-bar" justify="center" align="middle" style="margin-bottom: 20px;">
        <!-- 控制输入框的宽度为 50%，即12/24 -->
        <el-col :span="12">
          <el-input
            v-model="searchQuery"
            placeholder="请输入图片标题模糊搜索"
            suffix-icon="el-icon-search"
            clearable
            @input="handleSearchInput"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-col>
      </el-row>

      <!-- 图片列表 -->
      <el-card class="photo-list-card" shadow="hover">
        <h3>图片列表</h3>
        <el-table :data="currentPagePhotos" style="width: 100%" stripe>
          <!-- 图片ID -->
          <el-table-column
            prop="photo_id"
            label="图片ID"
            width="120"
            sortable
          ></el-table-column>

          <!-- 缩略图 -->
          <el-table-column label="缩略图" width="150">
            <template #default="scope">
              <el-image
                :src="scope.row.url"
                fit="cover"
                style="width: 100px; height: 100px"
                lazy
                alt="缩略图"
              />
            </template>
          </el-table-column>

          <!-- 图片标题 -->
          <el-table-column prop="title" label="图片标题">
            <template #default="scope">
              <el-link
                @click="previewPhoto(scope.row.url)"
                type="primary"
                underline
                >{{ scope.row.title }}
              </el-link>
            </template>
          </el-table-column>

          <!-- 图片分类 -->
          <el-table-column prop="category" label="图片分类"></el-table-column>

          <!-- 点赞数 -->
          <el-table-column prop="likes" label="点赞数" sortable></el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button
                size="mini"
                type="danger"
                @click="confirmDeletePhoto(scope.row.photo_id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px"
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="filteredPhotos.length"
          @current-change="handlePageChange"
        />
      </el-card>

      <!-- 图片预览对话框 -->
      <el-dialog
        v-model="isPreviewVisible"
        title="图片预览"
        width="50%"
        :before-close="handlePreviewClose"
      >
        <img :src="previewUrl" style="width: 100%" alt="图片预览" />
        <template #footer>
          <el-button @click="isPreviewVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photos: [], // 所有图片数据
      currentPage: 1, // 当前页码
      pageSize: 4, // 每页显示的图片数量
      searchQuery: "", // 搜索查询
      isPreviewVisible: false, // 是否显示预览对话框
      previewUrl: "", // 当前预览图片的 URL
    };
  },
  computed: {
    // 当前页面的图片数据
    currentPagePhotos() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.filteredPhotos.slice(start, end); // 使用过滤后的数据
    },
    // 计算过滤后的图片数据
    filteredPhotos() {
      if (!this.searchQuery) return this.photos;
      return this.photos.filter((photo) =>
        photo.title.includes(this.searchQuery) // 根据图片标题进行搜索
      );
    },
  },
  methods: {
    fetchPhotos() {
      this.$axios.get("/photos").then((res) => {
        this.photos = res.data;
        this.handlePageChange(1);  // 每次获取图片时，重置为第一页
      });
    },
    handleSearchInput() {
      this.handlePageChange(1);  // 在输入搜索时，重置为第一页
    },
    confirmDeletePhoto(photoId) {
      this.$confirm("确定删除这张图片吗？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deletePhoto(photoId);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除操作",
          });
        });
    },
    deletePhoto(photoId) {
      this.$axios.delete(`/photos/${photoId}`).then(() => {
        this.$message({
          message: "图片删除成功！",
          type: "success",
        });
        this.fetchPhotos();
      });
    },
    likePhoto(photoId) {
      this.$axios.post(`/photos/${photoId}/like`).then(() => {
        this.$message({
          message: "点赞成功！",
          type: "success",
        });
        this.fetchPhotos();
      });
    },
    previewPhoto(url) {
      this.previewUrl = url;
      this.isPreviewVisible = true;
    },
    handlePreviewClose() {
      this.isPreviewVisible = false;
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
  },
  mounted() {
    this.fetchPhotos();
  },
};
</script>

<style scoped>
.photo-manager {
  margin-top: 40px;
  padding: 0px 20px 0px 20px;
}

.photo-list-card {
  margin-bottom: 0px;
  padding: 0px 20px 0px 20px;  /* 减少顶部和底端的 padding */
}

/* 搜索栏样式 */
.search-bar {
  position: relative;
  padding: 10px;
  background: linear-gradient(90deg, rgba(255, 0, 150, 0.6), rgba(0, 204, 255, 0.6));
  background-size: 200% 200%;
  animation: gradientAnimation 5s ease infinite;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 输入框样式 */
.search-input .el-input__inner {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding-left: 20px;
  border: 2px solid #dcdfe6;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 输入框聚焦时样式 */
.search-input .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
}

/* 输入框图标样式 */
.search-input .el-input__icon {
  color: #409eff;
  transition: color 0.3s ease;
}

.search-input .el-input__icon:hover {
  color: #ff4081;
}

/* 动画效果 */
@keyframes gradientAnimation {
  0% {
    background-position: 200% 0;
  }
  50% {
    background-position: 0 100%;
  }
  100% {
    background-position: 200% 0;
  }
}
</style>
